<!DOCTYPE html>
<html class="no-js" lang="">

<head>
    #include( "/public-head.html")
</head>

<body >

<div class="main-content" >
    <div class="ott">

            <div class="cms-mobile" >
                <div class="cms-images" style="width: 320px;" >
                    <ul id="mobileList" class="sortable-list connectedSortable cms-mobile-focus cms-preview-list">
                        <li data-toggle="modal" data-target=".play-video" video-id="">
                            <div >
                                <img src="/images/upload_1242x416.jpg" class="add-video cms-preview-image" width="320" height="180">
                                <input  class="hidden data-json" />
                            </div>
                            <img src="/images/play.png" width="60" height="60" class="play">
                            <!--<button type="button" class="btn btn-danger focus-remove" >删<br/>除</button>-->
                        </li>
                    </ul>
                </div>

            </div>

    </div>
    <div class="ott">
        <!--编辑-->
        <div class="cms-data">
            <div class="btn-group cms-nav hidden" data-toggle="buttons">
                <label class="btn btn-default no-margin active"  type="$!{focus.type}" subscribe="$!{focus.subscribe}" terminal="$!{focus.terminal}" >
                    <input type="radio" name="options" id="indexHead">
                    背景视频
                </label>
            </div>
            <div class="cms-images">
                <ul id="indexList" class="sortable-list connectedSortable cms-edit-list" data-id="$!{focus.id}">
                    <li >
                        <div data-toggle="modal" data-target=".bgvideo-cms" >
                            <img src="/images/upload_1242x416.jpg" class="add-video" width="320" height="180" >
                            <!--<div class="gory">
                                <div class="exc">独家</div>
                            </div>-->
                            <input  class="hidden data-json" />
                        </div>
                        <button type="button" class="btn btn-danger focus-remove" >删<br/>除</button>
                    </li>
                </ul>
            </div>
            <div class="btn-div cms-btn">
                <button type="button" class="btn btn-primary add" >添加</button>
                <button type="button" class="btn btn-primary preview" >预览</button>
                <button type="button" class="btn btn-primary save" data-id="indexForm" >保存</button>
            </div>
        </div>

        <!--编辑-->
    </div>

</div>

<!-- /main area -->
<!--modal-->
#parse("/vrs/cms/background/background-modal.html")
#parse("/play-video-modal.html")
<!--modal-->
#include( "/public-script.html")
#include( "/sub-script.html")

<script type="text/javascript">
    $('.sortable-list').sortable({
        placeholder: 'ui-state-highlight',
        connectWith: '.connectedSortable'
    }).disableSelection();


    //加载修改区
    initEditBackgroundList($('.cms-edit-list'),'$!{focus.data}');
    //加载预览区
    initPreviewBackgroundList($('#mobileList'),'$!{focus.data}');


    $('.cms-data').ott({
        id:'$!{focus.id}',
        focusName:'$!{focus.focusName}',
        type:'$!{focus.type}',
        subscribe:'$!{focus.subscribe}',
        terminal:'$!{focus.terminal}',
        displayOrder:'$!{focus.displayOrder}',
        description:'$!{focus.description}',
        data:'$!{focus.data}'
    })


</script>
<!--sorttable-->

</body>

</html>
